<template>
  <div class="pager-container">
    <div class="pager-container-inner">
      <div class="btn-wrap">
        <el-button type="primary" @click="handleEdt()">资产录入</el-button>
        <el-button type="primary" @click="handleImport()">数据导入</el-button>
        <el-button type="success" @click="handleExport()">数据导出</el-button>
        <el-button type="warning" @click="handleContactBGBU()">关联BGBU</el-button>
        <el-button type="warning" @click="handleContactCollect()">关联采集</el-button>
        <el-button type="primary" @click="handleChart()">运营展示</el-button>
      </div>
      <bs-form form-type="query" :model="queryForm">
        <bs-form-item class="ctrl-form-item" label="管理IP">
          <bs-input placeholder="请输入管理IP" v-model="queryForm.manage_ip"></bs-input>
          <el-icon class="arrow" :class="{more: moreCondition}" @click="handleMoreCondition()"><CaretRight /></el-icon>
        </bs-form-item>
        <bs-form-item label="设备名">
          <bs-input placeholder="请输入设备名" v-model="queryForm.name"></bs-input>
        </bs-form-item>
        <bs-form-item label="供应商">
          <bs-select v-model="queryForm.vendor_name">
            <bs-option v-for="(item, index) in optionList.vendor" :key="index" :value="item.value" :label="item.label"></bs-option>
          </bs-select>
        </bs-form-item>
        <bs-form-item label="型号">
          <bs-select v-model="queryForm.model_name">
            <bs-option v-for="(item, index) in optionList.modelName" :key="index" :value="item.value" :label="item.label"></bs-option>
          </bs-select>
        </bs-form-item>
        <template v-if="moreCondition">
          <bs-form-item label="机房">
            <bs-select v-model="queryForm.room" @change="handleRoomChange">
              <bs-option v-for="(item, index) in optionList.room" :key="index" :value="item.value" :label="item.label"></bs-option>
            </bs-select>
          </bs-form-item>
          <bs-form-item label="模块">
            <bs-select v-model="queryForm.model"  @change="handleModelChange">
              <bs-option v-for="(item, index) in optionList.model" :key="index" :value="item.value" :label="item.label"></bs-option>
            </bs-select>
          </bs-form-item>
          <bs-form-item label="机柜">
            <bs-select v-model="queryForm.rack_name">
              <bs-option v-for="(item, index) in optionList.rack" :key="index" :value="item.value" :label="item.label"></bs-option>
            </bs-select>
          </bs-form-item>
          <bs-form-item label="区域">
            <bs-select v-model="queryForm.netzone_name">
              <bs-option v-for="(item, index) in optionList.netzone" :key="index" :value="item.value" :label="item.label"></bs-option>
            </bs-select>
          </bs-form-item>
          <bs-form-item label="角色">
            <bs-select v-model="queryForm.role_name">
              <bs-option v-for="(item, index) in optionList.role" :key="index" :value="item.value" :label="item.label"></bs-option>
            </bs-select>
          </bs-form-item>
          <bs-form-item label="类型">
            <bs-select v-model="queryForm.category_name">
              <bs-option v-for="(item, index) in optionList.category" :key="index" :value="item.value" :label="item.label"></bs-option>
            </bs-select>
          </bs-form-item>
          <bs-form-item label="序列号">
            <bs-input placeholder="请输入序列号" v-model="queryForm.serial_num"></bs-input>
          </bs-form-item>
          <bs-form-item label="状态">
            <bs-select v-model="queryForm.status">
              <bs-option v-for="(item, index) in optionList.status" :key="index" :value="item.value" :label="item.label"></bs-option>
            </bs-select>
          </bs-form-item>
          <bs-form-item label="网络架构">
            <bs-select v-model="queryForm.framework_name">
              <bs-option v-for="(item, index) in optionList.framework" :key="index" :value="item.value" :label="item.label"></bs-option>
            </bs-select>
          </bs-form-item>
          <bs-form-item label="网络属性">
            <bs-select v-model="queryForm.attribute_name">
              <bs-option v-for="(item, index) in optionList.attr" :key="index" :value="item.value" :label="item.label"></bs-option>
            </bs-select>
          </bs-form-item>
          <bs-form-item label="U位">
            <bs-input placeholder="起始U位" v-model="queryForm.u_location_start"></bs-input>
          </bs-form-item>
          <bs-form-item class="ctrl-form-item" label="搜索">
            <bs-input placeholder="请输入关键字" :suffix-icon="Search"></bs-input>
          </bs-form-item>
        </template>
        <bs-form-item class="form-item-btns">
          <el-button type="primary" @click="handleSearch()">查询</el-button>
          <el-button @click="handleReset()">重置</el-button>
        </bs-form-item>
      </bs-form>
      <div class="table-content">
        <bs-table ref="tableRef" :get-data="getList" :columns="columns" :data="tableData"></bs-table>
      </div>
    </div>
    <EditNetwork ref="editRef" @confirmed="handleSearch"/>
    <DataImport ref="importRef" />
  </div>
</template>
<script setup lang="ts">
import {delEmptyProp} from '@/utils'
import {reactive, ref, h, onMounted} from 'vue'
import { Search } from '@element-plus/icons-vue'
import BsTable from '@/components/table/BsTable.vue'
import ColDetail from './components/network/ColDetail.vue'
import EditNetwork from './components/network/EditNetwork.vue'
import DataImport from './components/network/DataImport.vue'
import * as API from '@/service/modules/resource'
import {useOption} from './hooks/network'
import {useRouter} from 'vue-router'

const router = useRouter()
const queryForm = reactive({
  name: '',
  manage_ip: '',
  serial_num: '',
  framework_name: '',
  vendor_name: '',
  category_name: '',
  model_name: '',
  attribute_name: '',
  room: '',
  model: '',
  rack_name: '',
  u_location_start: '',
  role_name: '',
  netzone_name: '',
  status: ''
})
const editRef = ref()
const importRef = ref()
const tableData = ref<any[]>([])
const tableRef = ref()
const moreCondition = ref(true)
const {optionList, getOptionList, getModelOption, getRackOption, clearOption} = useOption()

const columns:ColumnItem[] = [
  {
    type: 'selection',
    prop: 'selection',
    fixed: 'left',
    width: 30
  },
  {
    type: 'expand',
    prop: 'expand',
    fixed: 'left',
    width: 20,
    renderExpand: (row) => {
      return h(ColDetail, {info: row})
    }
  },
  {
    label: '设备名称',
    prop: 'name',
    fixed: 'left',
    width: 180
  },
  {
    label: '管理IP',
    prop: 'manage_ip',
    width: 120
  },
  {
    label: '设备备注',
    prop: ''
  },
  {
    label: '厂商',
    prop: 'vendor_name',
    width: 100
  },
  {
    label: '型号',
    prop: 'model_name',
    width: 120
  },
  {
    label: '类型',
    prop: 'category_name'
  },
  {
    label: '机房',
    prop: 'room',
    width: 120
  },
  {
    label: '区域',
    prop: 'netzone_name',
    width: 150
  },
  {
    label: '角色',
    prop: 'role_name',
    width: 120
  },
  {
    label: '状态',
    prop: 'status'
  },
  {
    label: '自动化',
    prop: ''
  },
  {
    label: '机柜',
    prop: 'rack_name'
  },
  {
    label: 'U位',
    prop: 'u_location_start'
  },
  {
    label: '操作',
    prop: '',
    fixed: 'right',
    width: 180,
    bodyOptions: {
      type: 'button',
      bind (row, _index) {          
        return {
          buttons: [{
            text: '编辑',
            onClick: () => {
              handleEdt(row)
            }
          }, {
            text: 'WEBSSH',
            onClick: async () => {
              const res:any = await API.getSshConfig({
                manage_ips: row.manage_ip
              }, 'network_device_webssh')
              const url = router.resolve({
                path: '/ssh',
                query: {
                  route: 'ssh',
                  id: res.data.id,
                  remote_ip: res.data.remote_ip,
                  manage_ip: row.manage_ip
                }
              })
              window.open(url.fullPath, '_blank')
            }
          }, {
            text: '复制',
            onClick: () => {
            }
          }]
        }
      }
    }
  }
]

const handleMoreCondition = () => {
  moreCondition.value = !moreCondition.value
}


const handleRoomChange = (val:any) => {
  queryForm.model = ''
  queryForm.rack_name = ''
  clearOption('model')
  clearOption('rack')
  if (val) {
    getModelOption({datacenterss: val})
  }
}

const handleModelChange = (val:any) => {
  queryForm.rack_name = ''
  clearOption('rack')
  if (val) {
    getRackOption({datacenterss: queryForm.room, models: val})
  }
}

/**资产录入、编辑 */
const handleEdt = (item?:any) => {
  editRef.value.open(item)
}
/**
 * 数据导入
 */
const handleImport = () => {
  importRef.value.open()
}

/**
 * 数据导出
 */
const handleExport = () => {
  API.exportData({
    ...delEmptyProp(queryForm)
  })
}

/**
 * 关联BGBU
 */
const handleContactBGBU = () => {
}

/**
 * 关联采集
 */
const handleContactCollect = () => {
}

/**
 * 运营展示
 */
const handleChart = () => {
}

/**
 * 获取表格数据
 */
const getList = async (tableParams:TableDataParam) => {
  const params = {
    start: tableParams.start,
    limit: tableParams.limit,
    ...delEmptyProp(queryForm)
  }
  const res:any = await API.getResourceList(params)
  tableData.value = res.data
  return {
    total: res.total
  }
}

const handleReset = () => {
  queryForm.name = ''
  queryForm.manage_ip = ''
  queryForm.serial_num = ''
  queryForm.framework_name = ''
  queryForm.vendor_name = ''
  queryForm.category_name = ''
  queryForm.model_name = ''
  queryForm.attribute_name = ''
  queryForm.room = ''
  queryForm.model = ''
  queryForm.rack_name = ''
  queryForm.u_location_start = ''
  queryForm.role_name = ''
  queryForm.netzone_name = ''
  queryForm.status = ''
  clearOption('model')
  clearOption('rack')
  handleSearch()
}

const handleSearch = () => {
  tableRef.value.queryData()
}

onMounted(() => {
  getOptionList()
  handleSearch()
})
</script>
<style lang="scss" scoped>
.btn-wrap {
  margin-bottom: 16px;
  text-align: right;
}
// .table-content {
// }
.ctrl-form-item {
  position: relative;
  .arrow {
    z-index: 1;
    position: absolute;
    left: -80px;
    top: 12px;
    cursor: pointer;
    transition: .5s;
    &.more {
      transform: rotate(90deg);
    }
  }
}
</style>
